<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            text-decoration: none;
            list-style: none;
        }

        #user {
            text-align: right;
            font-size: 13px;
            height: 28px;
            line-height: 28px;
        }

        #user a {
            color: black;
        }

        #user a:hover {
            color: rgb(52, 179, 218);
        }

        #all {
            display: flex;
            padding-bottom: 20px;
        }

        #nav {
            width: 1000px;
            display: flex;
            justify-content: space-evenly;
        }

        li {
            height: 40px;
            line-height: 50px;
            font-size: large;
            cursor: pointer;
            border-bottom: solid 3px rgba(0,0,0, 0);
            transition: all 0.7s;
            transition-delay: 0.7s;
        }

        #nav>li:hover {
            border-bottom: solid 3px orange;
            transition-delay: 0s;
        }

        .Q {
            font-size: x-large;
            float: right;
        }

        #pic {
            height: 585px;
            display: flex;
            margin-bottom: 40px;
        }

        #rpic {
            margin-left: 40px;
            /* display: flex; */
            /* align-items: space-between; */
        }
    </style>
</head>

<body>
    <div id="user">
        <a href="">选择区域/语言</a>
        <a href="">登录</a>
        <a href="">注册</a>
    </div>
    <div id="all">
        <img src="./images/logo.png">
        <div id="nav">
            <li>我想...</li>
            <li>个人及家用产品</li>
            <li>商用解决方案</li>
            <li>行业话术</li>
            <li>技术支持</li>
            <li>合作伙伴</li>
            <li>开发者</li>
            <li>华为商城</li>
        </div>
        <li class="Q">Q</li>
    </div>
    <img src="images/bg.jpg" style="width: 100%">
    <br><br>

    <div id="pic">
        <img src="images/pic1.jpg" style="width: 50%">
        <div id="rpic">
            <img src="images/pic2.jpg" style="width: 100%">
            <br><br>
            <img src="images/pic3.jpg" style="width: 100%">
        </div>
    </div>
    <img src="images/bg2.jpg">


</body>

</html>